<template>
  <a-modal v-model:open="open"
           width="940px"
           title="选择职位"
           :keyboard="false"
           :mask-closable="false"
           @close="handleClose"
           @ok="handleSubmit"
           @cancel="handleClose">
    <a-table
        :columns="columns"
        rowClassName="items"
        :key="new Date().getTime()"
        :loading="tableLoading"
        rowKey="id"
        :pagination="false"
        :data-source="tableData"
        size="small"
        :row-selection="{ selectedRowKeys: state.selectedRowKeys, onChange: onSelectChange }"
        style="height:calc(100vh - 305px);overflow: auto" sticky bordered>
      <template #bodyCell="{ column,text,record,index }">

      </template>
    </a-table>
  </a-modal>
</template>
<script setup>
const open = ref(false);
const tableLoading = ref(false)
const emits = defineEmits(["callback"])
const tableData = ref([])
const queryParams = reactive({
  pageNo: 1,
  pageSize: 500,
  status: null,
  keyword: ''
})

const columns = [
  {title: '职位',dataIndex: 'zhiWeiMing', align: "center"},
];

const checkedList = ref([])
// 控制表格checkbox选中
const state = reactive({
  selectedRowKeys: [],
  loading: false,
})

// 选择行
const onSelectChange = (e1,e2) => {
  state.selectedRowKeys = e1
}

const handleLoadData = async () => {
  tableLoading.value = true
  const resp = await useLoadChuanBoZhiWeiBiaoApi()
  tableData.value = resp.data
  tableLoading.value = false
}

const handleSubmit = ()=>{
  var checkIds = state.selectedRowKeys
  if (checkIds && checkIds.length > 0){
      const checkeList =  tableData.value.filter(c=>checkIds.includes(c.id))
      emits("callback",checkeList.map(c=>c.zhiWeiMing))
      handleClose()
  }
}

const handleOpen = async () => {
  open.value = true
  await handleLoadData()
}

const handleClose = async () => {
  open.value = false
  state.selectedRowKeys = []
}

defineExpose({
  handleOpen
})
</script>

<style lang="scss" scoped>
.full-modal {
  .ant-modal {
    max-width: 100%;
    top: 0;
    padding-bottom: 0;
    margin: 0;
  }

  .ant-modal-content {
    display: flex;
    flex-direction: column;
    height: calc(100vh);
    overflow: auto;
    border-radius: 0px;
  }

  :where(.css-dev-only-do-not-override-1hsjdkk).ant-modal .ant-modal-header {
    background: transparent;
  }

  .ant-modal-body {
    flex: 1;
  }
}

.loading-container {
  position: relative
}

.loading-container .loading .loading-div {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%)
}

.loading-container .loading .loading-div .loading-div-column {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  -ms-flex-align: center;
  align-items: center
}

.enquiry-order-process .first {
  width: 20px;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-align: end;
  align-items: flex-end;
  margin-right: 15px
}

.enquiry-order-process .first-null,.enquiry-order-process-table .line {
  width: 20px;
  display: -ms-flexbox;
  -ms-flex-pack: center;
  margin-right: 15px
}

.enquiry-order-process .first div {
  width: 20px;
  height: 20px;
  border-radius: 20px;
  background: #3296e1
}

.enquiry-order-process .first-null {
  display: flex;
  justify-content: center;
  -ms-flex-align: end;
  align-items: flex-end
}

.enquiry-order-process .first-null div {
  width: 20px;
  height: 20px;
  border-radius: 20px;
  background: #FFF;
  border: 1px solid #3296E1
}

.enquiry-order-process .two {
  font-size: 14px
}

.enquiry-order-process-table .line {
  display: flex;
  justify-content: center
}

.enquiry-order-process-table .line div {
  width: 2px;
  height: 100%;
  background: #3296e1
}

.enquiry-order-process-table .line-null {
  width: 20px;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
  justify-content: center
}

.enquiry-order-process-table .line-null div {
  width: 2px;
  height: 100%;
  background: #DDD
}

</style>